<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>购物车</title>
    <script src="../../static/js/vue.js"></script>
    <style>
        *
        {
            padding: 0;
            margin: 0;
        }
        #box ul
        {
            display: flex;
            flex-direction: column;
        }
        #box ul li
        {
            height: 220px;
            width: 700px;
            display: flex;
        }
        #box input
        {
            margin-right: 120px;
            margin-left: 50px;
        }
        #box img
        {
            width: 200px;
            height: 200px;
        }
        #box ul li .info button
        {
            width: 20px;
            height: 20px;
        }
    </style>

</head>
<body>
    <div id="box">
        <ul>
            <li v-for="(data, index) in datalist" :key="data.id">
                <input type="checkbox" v-model="total" :value="data">
                <img :src="data.img_src" alt="">
                <div class="info">
                    商品名称: {{ data.name }}
                    <br>
                    商品价格:{{ data.price }}
                    <br>
                    商品数量:
                    <button @click="data.number--" :disabled="data.number<=1">-</button>
                    {{ data.number }}
                    <button @click="data.number++" :disabled="data.number>=data.limit">+</button>
                    <br>
                    <button @click="del(index)">删除</button>
                </div>
            </li>
        </ul>
        总价: <span style="color: red">￥{{ calculate() }}</span>
        <br>
        {{ total }}
    </div>
<script>
    new Vue
    ({
        el:"#box",
        data:
            {
                total:
                [],
                datalist:
                    [
                        {
                            id: 0,
                            name:"飞机",
                            number: 1,
                            limit: 7,
                            price: 588999,
                            img_src: "https://ts1.cn.mm.bing.net/th/id/R-C.009c4a542b5d4acf253233d610359a7a?rik=%2f07RAhf0Yo1rKw&riu=http%3a%2f%2fwww.chinatiredealer.com%2fupload%2f201808%2f01%2f201808011454498787.jpg&ehk=xytaQN5nry7O5vsBFse%2fA12ZFUfdjC%2fKgyZlepTlR3k%3d&risl=&pid=ImgRaw&r=0",
                            discount: 10
                        },
                        {
                            id: 1,
                            name:"坦克",
                            number: 1,
                            limit: 10,
                            price: 677777,
                            img_src: "https://tse3-mm.cn.bing.net/th/id/OIP-C.HUmSumcnzgTQmL21XcgdqwHaE7?pid=ImgDet&rs=1",
                            discount: 10
                        },
                        {
                            id: 2,
                            name:"跑车",
                            number: 1,
                            limit: 10,
                            price: 9889898,
                            img_src: "https://ts1.cn.mm.bing.net/th/id/R-C.9a4f795b3dc1b7247d530f07e957977d?rik=Q%2fBwNYPyoGANRw&riu=http%3a%2f%2fimage.qianye88.com%2fpic%2f1dd7671664cb98098af100ce1f895b09&ehk=g5HW789wSpJFC1Iqvs9Und1Cw3iLds62uwP0XAjbU6o%3d&risl=&pid=ImgRaw&r=0",
                            discount: 10
                        }
                    ]
            },
        methods:
            {
                calculate()
                {
                    let all = 0

                    this.total.forEach(item=>{
                        all += item.price * item.number
                        }
                    )

                    return all
                },
                del(index)
                {

                    this.datalist.splice(index, 1)
                },
                is_valid(num, top)
                {
                    if(num <= 1)
                        return 1
                    if(num >= top)
                        return top
                    return num
                }
            }
    })
</script>

</body>
</html>